<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-18 19:31:04
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
import { Gauge } from "@antv/g2plot";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  // 组件名称
  name: "demo",
  // 组件状态值
  setup() {
    const root = ref(null);
    let plot = null;

    let data_gauge = ref([]);
    const loadData = async () => {
      data_gauge.value = [];
    };
    const color = ["#F4664A", "#FAAD14", "#30BF78"];
    const getColor = (percent) => {
      return percent < 0.4 ? color[0] : percent < 0.6 ? color[1] : color[2];
    };
    const initChart = () => {
      plot = new Gauge(root.value, {
        data: data,
        percent: 0.2,
        range: {
          color: "#5c90f9",
        },
        indicator: {
          pointer: {
            style: {
              stroke: "#5c90f9",
            },
          },
          pin: {
            style: {
              stroke: "#5c90f9",
            },
          },
        },
        axis: {
          label: {
            formatter(v) {
              return Number(v) * 100;
            },
          },
          subTickLine: {
            count: 3,
          },
        },
        statistic: {
          content: {
            formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,
            style: {
            fontSize: 18,
            color:"yellow",
          },
          },
          // style: {
          //   fontSize: 60,
          //   color:"yellow",
          // },
        },
        animation: false,
      });
      // gauge.update({
      //   theme: {
      //     styleSheet: {
      //       brandColor: "#B8E1FF",
      //       paletteQualitative10: [
      //         "#B8E1FF",
      //         "#9AC5FF",
      //         "#7DAAFF",
      //         "#5B8FF9",
      //         "#3D76DD",
      //         "#085EC0",
      //         "#0047A5",
      //         "#00318A",
      //         "#001D70",
      //       ],
      //       paletteQualitative20: [
      //         "#B8E1FF",
      //         "#9AC5FF",
      //         "#7DAAFF",
      //         "#5B8FF9",
      //         "#3D76DD",
      //         "#085EC0",
      //         "#0047A5",
      //         "#00318A",
      //         "#001D70",
      //       ],
      //     },
      //   },
      // });
      // as.render();
      plot.render();
      let data = 0.5;
      const interval = setInterval(() => {
        if (data >= 1) {
          clearInterval(interval);
        } else {
          data += 0.1;
          gauge.changeData(data > 1 ? data-1 : data);
        }
      }, 100);
    };

    onMounted(async () => {
      await loadData();
      initChart();
    });

    onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });

    return {
      root,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>